<template>
  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="功能简介" name="first">
      <div>
        <div class="content-section">
          <el-row>
            <el-col :span="24">
              <el-col :span="12">
                <div class="main-image" >
                  <img width="350" height="350" src="@/assets/simulation.gif" alt="Proteus VSM bridges the gap in the design life cycle between schematic capture and PCB layout. It enables you to write and apply your firmware to a microcontroller component on the schematic and then simulate the entire system in software.">
                </div>
              </el-col>
              <el-col :span="12" style="padding: 20px">
                <div class="content">
                  <h2>虚拟仿真</h2>
                  <p>利用模型复现实际系统中发生的本质过程，并通过对系统模型的实验来研究存在的或设计中的系统，又称模拟。这里所指的模型包括物理的和数学的，静态的和动态的，连续的和离散的各种模型。<br>仿真的重要工具是计算机。仿真与数值计算、求解方法的区别在于它首先是一种实验技术。仿真的过程包括建立仿真模型和进行仿真实验两个主要步骤。</p>
                </div>
              </el-col>
            </el-col>
          </el-row>
        </div>
        <div class="content-section even">
          <el-row>
            <el-col :span="24">
              <el-col :span="12" style="padding: 50px">
                <div class="content">
                  <h2>远程实验</h2>
                  <p>远程实验室是计算机远程教学的重要组成部分，也是我国发展远程教育的一个重要内容。 随着我国远程教育工程的启动，开发建设远程虚拟实验室已在各大院校蓬勃发展起来。<br>结合现代教学方法，采用先进的计算机网络技术、通信技术和多媒体技术，实现远程教学和远程实验, 就可以通过网络上的任何一台工作站不受时间、地点的限制来进行实验的教学和模拟。这样，不仅可以大大提高教学质量和教学水平，而且可以实现有限资源的共享，从而促进教学和科研的发展。</p>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="main-image" >
                  <img width="350" height="350" src="@/assets/embedded_workflow.png" alt="Proteus VSM bridges the gap in the design life cycle between schematic capture and PCB layout. It enables you to write and apply your firmware to a microcontroller component on the schematic and then simulate the entire system in software.">
                </div>
              </el-col>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="软件介绍" name="second">
      <div >
        <div class="content-section" >
          <el-row>
            <el-col :span="24">
              <el-col :span="12">
                <div class="main-image" >
                  <img width="350" height="350" src="@/assets/quartusII.png" alt="Proteus VSM bridges the gap in the design life cycle between schematic capture and PCB layout. It enables you to write and apply your firmware to a microcontroller component on the schematic and then simulate the entire system in software.">
                </div>
              </el-col>
              <el-col :span="12" style="padding: 50px">
                <div class="content">
                  <h2>Quartus II</h2>
                  <p>Quartus II 是Altera公司的综合性CPLD/FPGA开发软件，原理图、VHDL、VerilogHDL以及AHDL（Altera Hardware 支持Description Language）等多种设计输入形式，内嵌自有的综合器以及仿真器，可以完成从设计输入到硬件配置的完整PLD设计流程。</p>
                  <el-button type="primary" >
                    <el-link :underline="false" href="https://www.intel.cn/content/www/cn/zh/software/programmable/quartus-prime/download.html" target="_blank">点击下载</el-link>
                  </el-button>
                  <el-button type="success">本地打开</el-button>
                </div>
              </el-col>
            </el-col>
          </el-row>
        </div>
        <div class="content-section even">
          <el-row>
            <el-col :span="24">
              <el-col :span="12" style="padding: 50px">
                <div class="content">
                  <h2>Vivado</h2>
                  <p>Vivado® 设计套件可提供全新的超高生产力设计方法和新一代基于 C/C++ 和 IP 的设计。新版 HLx 包括 HL 系统版本、HL 设计版本和 HL WebPACK ™ 版本。结合最新 UltraFast ™高级生产力设计方法指南，相比采用传统方法而 言，用户可将生产力提升 10-15 倍。</p>
                  <el-button type="primary" >
                    <el-link :underline="false" href="https://china.xilinx.com/products/design-tools/vivado.html" target="_blank">点击下载</el-link>
                  </el-button>
                  <el-button type="success">本地打开</el-button>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="main-image" >
                  <img width="400" height="350" src="@/assets/vivado.png" alt="Proteus VSM bridges the gap in the design life cycle between schematic capture and PCB layout. It enables you to write and apply your firmware to a microcontroller component on the schematic and then simulate the entire system in software.">
                </div>
              </el-col>
            </el-col>
          </el-row>
        </div>
        <div class="content-section" >
          <el-row>
            <el-col :span="24">
              <el-col :span="12">
                <div class="main-image" >
                  <img width="350" height="350" src="@/assets/ISE.png" alt="Proteus VSM bridges the gap in the design life cycle between schematic capture and PCB layout. It enables you to write and apply your firmware to a microcontroller component on the schematic and then simulate the entire system in software.">
                </div>
              </el-col>
              <el-col :span="12" style="padding: 50px">
                <div class="content">
                  <h2>ISE Design Suite</h2>
                  <p>ISE Design Suite：Embedded Edition 包括 Platform Studio (XPS)、软件开发套件 (SDK)、包括 MicroBlaze™ 软处理器和外设的大型即插即用 IP 库以及完整的 RTL 到比特流设计流程。嵌入式版本可提供实现最佳设计结果所需的基本工具、技术和熟悉的设计流程。具体包括动态降低功耗所需的智能时钟门控、团队设计 (面向多站点设计团队)、设计保存 (面向时序重复性)、部分重配置选项，实现更佳系统灵活性、系统尺寸、功耗和成本。。</p>
                  <el-button type="primary" >
                    <el-link :underline="false" href="https://china.xilinx.com/products/design-tools/ise-design-suite.html" target="_blank">点击下载</el-link>
                  </el-button>
                  <el-button type="success">本地打开</el-button>
                </div>
              </el-col>
            </el-col>
          </el-row>
        </div>
<!--        <div class="content-section even">-->
<!--          <el-row>-->
<!--            <el-col :span="24">-->
<!--              <el-col :span="12" style="padding: 50px">-->
<!--                <div class="content">-->
<!--                  <h2>Keil</h2>-->
<!--                  <p>Proteus虚拟系统建模（VSM）将混合模式SPICE仿真与世界领先的快速微控制器仿真融合在一起。可以通过软件对硬件和固件设计进行快速原型制作！ <br> <br> 请在Proteus电子电路模拟器中设计，测试和调试嵌入式项目。嵌入式系统工作流程的敏捷开发。</p>-->
<!--                  <el-button type="primary" >-->
<!--                    <el-link :underline="false" href="https://www.labcenter.com/downloads/" target="_blank">点击下载</el-link>-->
<!--                  </el-button>-->
<!--                  <el-button type="success">本地打开</el-button>-->
<!--                </div>-->
<!--              </el-col>-->
<!--              <el-col :span="12">-->
<!--                <div class="main-image" >-->
<!--                  <img width="350" height="350" src="@/assets/embedded_workflow.png" alt="Proteus VSM bridges the gap in the design life cycle between schematic capture and PCB layout. It enables you to write and apply your firmware to a microcontroller component on the schematic and then simulate the entire system in software.">-->
<!--                </div>-->
<!--              </el-col>-->
<!--            </el-col>-->
<!--          </el-row>-->
<!--        </div>-->
      </div>
    </el-tab-pane>
<!--    <el-tab-pane label="远程实验" name="third">-->
<!--    </el-tab-pane>-->
  </el-tabs>
</template>
<script>
export default {
  data () {
    return {
      activeName: 'first'
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    }
  }
}
</script>
<style Lang="less" scoped>

.content-section {background: #022e5f;color: #ffffff;padding: 30px 0;}
.content-section h2 {font-size: 40px;line-height: 1.2;margin-top: 0;}
.content-section h2 {border-bottom: 2px solid #1c79b3;margin-bottom: 20px;padding-bottom: 20px;}
.content-section br {margin: 10px 0;display: block;content: "";}
.content-section p {line-height: 1.9;text-align: left}
.content-section.even {background: #09233c;}

/deep/.el-tabs__nav{
  background: #2a3746;
}

/deep/.el-tabs__item{
  color: #fff;
}

.el-row{
  margin-bottom: 0;
}

.el-link.el-link--default {
  color: #fff;
}

.el-upload__tip {
  font-size: 12px;
  color: #fff;
  margin-top: 7px;
}

/deep/.el-upload-list__item:hover {
  background-color: #409eff;
}

/deep/.el-upload-list__item-name{
  color: #fff;
}
/deep/.el-upload-list__item-name [class^=el-icon]{
  color: #fff;
}

/*how to overwrite the style of el-main?*/
/deep/.el-main{
  padding: 0 ;
}

.grid-content {
  min-height: 100px;
}

</style>
